/*
 * 品牌创建
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-08-20 15:11:57
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-product-brand-create {
        min-height: 600px;
    }
</style>
<template>
	<div class="v-admin-product-brand-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(80, 90)"
					name="create-form">

					<Form-item
						:label="$t('brand.name')"
						prop="name">
						<i-input
							v-model="formValidate.name"
							:placeholder="$t('brand.please_enter_name')"
							name="create-name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('brand.logo')"
						prop="logo">
						<iview-uploader
							ref="logo"
							:on-remove="handleRemove"
							:on-success="handleUploadSuccess"
							:multiple="false"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>
import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

import iviewUploader from 'src/views/component/iview-uploader';
import Uploader from 'src/views/component/Uploader';

export default {
	name: 'AdminBrandCreate',

	components: {
		'iview-uploader': iviewUploader,
		Uploader,
	},

	mixins: [showLocalImage, labelWidthMixin],

	data() {
		return {
			formValidate: {
				name: null,
				url: null,
				logo: null,
			}, // 新建品牌时的表单

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('brand.name') }),
						trigger: 'blur,change',
					},
				],
				url: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('brand.name') }),
						trigger: 'blur,change',
					},
					{
						type: 'url',
						message: this.$t('validate.url'),
						trigger: 'blur,change',
					},
				],
				logo: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('brand.logo') }),
						trigger: 'blur,change',
					},
				],
			},
		};
	},
	methods: {
		/**
		 * 移除图片
		 * @return {undefined}
		 */
		handleRemove() {
			this.formValidate.logo = null;
			this.$refs.formValidate.validateField('logo');
		},

		/**
		 * 选择图片
		 * @param {String} url {图片路径}
		 * @return {undefined}
		 */
		handleUploadSuccess({ url }) {
			this.formValidate.logo = url;
			this.$refs.formValidate.validateField('logo');
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.handlePost();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs.logo.clearFiles();

			this.$refs[name].resetFields();

			this.formValidate.preview_img = '';
		},

		/**
         * 父子组件通信
         * @return {undefined}
         */
		handlePost() {
			this.$emit('post', this.formValidate);
		},

	},
};
</script>
